/*
 * @Author: szx
 * @Date: 2022-07-01 15:43:09
 * @LastEditTime: 2022-07-05 17:06:09
 * @Description: 输入框
 * @FilePath: \link_jump\src\components\TodoInput.tsx
 */
import React, { useState, useRef } from 'react';
import { StyleSheet, TextInput, TouchableOpacity, ScrollView, View, Text, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

interface TodoInputProps {
  addTask: (name: string, link: string) => void;
}

export function TodoInput({ addTask }: TodoInputProps) {
  const [name, setName] = useState('');
  const [link, setLink] = useState('');
  const textNameRef = useRef<TextInput>(null);
  const textLinkRef = useRef<TextInput>(null);

  function handleAddNewTask() {
    if (name && link) {
      if (/https?:\/\//.test(link)) {
        addTask(name, link);
        textNameRef.current?.blur();
        textLinkRef.current?.blur();
        setLink('');
        setName('');
      } else {
        Alert.alert('链接必须以http(s)://开头！');
      }
    } else {
      Alert.alert('请输入名称和链接', '名称和链接都是必填项');
    }
  }

  return (
    <View style={styles.inputContainer}>
      <ScrollView>
        <View style={styles.inputBox}>
          <Text style={styles.inputText}>名称</Text>
          <TextInput ref={textNameRef} style={styles.input} placeholder="输入名称" placeholderTextColor="#B2B2B2" returnKeyType="send" selectionColor="#666666" value={name} onChangeText={setName} />
        </View>
        {/* 这块是横线的代码 */}
        <View style={{ backgroundColor: 'white' }}>
          <View style={[{ height: 0, borderTopWidth: StyleSheet.hairlineWidth, borderColor: '#bdbdbd', opacity: 0.7, margin: StyleSheet.hairlineWidth }]} />
        </View>
        <View style={styles.inputBox}>
          <Text style={styles.inputText}>链接</Text>
          <TextInput
            ref={textLinkRef}
            style={styles.input}
            placeholder="输入链接，必须以http(s)://开头"
            placeholderTextColor="#B2B2B2"
            returnKeyType="send"
            selectionColor="#666666"
            value={link}
            onChangeText={setLink}
            onSubmitEditing={handleAddNewTask}
          />
        </View>
      </ScrollView>

      <TouchableOpacity testID="add-new-task-button" activeOpacity={0.7} style={styles.addButton} onPress={handleAddNewTask}>
        <Icon name="chevron-right" size={24} color="#B2B2B2" />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    backgroundColor: '#FFF',
    borderRadius: 5,
    marginTop: -51,
    marginHorizontal: 24,
    flexDirection: 'row',
    alignItems: 'center'
  },
  inputBox: {
    height: 50,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  inputText: {
    height: 50,
    textAlign: 'center',
    textAlignVertical: 'center',
    paddingHorizontal: 20,
    backgroundColor: '#FFF',
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    color: '#333333'
  },
  input: {
    flex: 1,
    height: 50,
    paddingLeft: 0,
    paddingRight: 20,
    backgroundColor: '#FFF',
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    borderRightWidth: 1,
    borderRightColor: '#EBEBEB',
    color: '#666666'
  },
  addButton: {
    backgroundColor: '#FFF',
    height: 100,
    paddingHorizontal: 12,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopRightRadius: 5,
    borderBottomRightRadius: 5
  }
});
